<?php echo form_open(uri_string(), 'class="crud" id="personal-info-form"'); ?>
<?php echo form_hidden('escort_id', $escort->getId()) ?>
<?php 
	$ci = &get_instance();
?>

<style>
	#public_top_media, #public_medias, #private_medias{
		float:left;
		min-height:70px;
		width:100%;
	}
	.media-item{
		float:left;
		margin:5px 10px 5px 0px;
		cursor:pointer;
	}
	 
</style>
<fieldset>
	<ul id="personal-content" class="ui-sortable form_inputs">
		<li class="" id="header">
			<fieldset>
				<legend><?php echo lang('escort_be_escort_picture_pubic_top_image_label')?></legend>
				<div id="public_top_media">
					<?php $media_array= $ci->media_entity->getMediaByPermission($escort->getId(), 'public_top');?>
					<?php foreach($media_array as $item):?>
					<?php $MEDIA = $ci->media_entity->init('id',$item->id);?>
						<?php if($MEDIA->getType() == 'image'):?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="image">
								<?php echo thumb($MEDIA->getTargetFile('image'),THUMB_W,THUMB_H);?>
								<div class="media-edit image-edit" id="<?php echo $item->id?>"><?php echo language_translate('pictures_videos_media_edit');?></div>
								<div class="media-edit image-delete" id="<?php echo $item->id?>"><?php echo lang('escort_be_photo_delete');?></div>
							</div>
						<?php else:?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="video">
								<?php echo thumb($MEDIA->getTargetFile('avatar'),THUMB_VW,THUMB_VH);?>
								<div class="media-edit"><?php echo language_translate('pictures_videos_media_edit');?></div>
							</div>
						<?php endif;?>
					<?php endforeach;?>
				 </div>
			</fieldset>
		</li>
		<li class="" id="personal_visit">
			<fieldset>
				<legend><?php echo lang('escort_be_escort_picture_public_image_label')?></legend>
				<div id="public_medias">
					<?php $media_array= $ci->media_entity->getMediaByPermission($escort->getId(), 'public');?>
					<?php foreach($media_array as $item):?>
					<?php $MEDIA = $ci->media_entity->init('id',$item->id);?>
						<?php if($MEDIA->getType() == 'image'):?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="image">
								<?php echo thumb($MEDIA->getTargetFile('image'),THUMB_W,THUMB_H);?>
								<div class="media-edit image-edit" id="<?php echo $item->id?>"><?php echo language_translate('pictures_videos_media_edit');?></div>
								<div class="media-edit image-delete" id="<?php echo $item->id?>"><?php echo lang('escort_be_photo_delete');?></div>
							</div>
						<?php else:?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="video">
								<?php echo thumb($MEDIA->getTargetFile('avatar'),THUMB_VW,THUMB_VH);?>
								<div class="media-edit"><?php echo language_translate('pictures_videos_media_edit');?></div>
							</div>
						<?php endif;?>
					<?php endforeach;?>
				 </div>
			</fieldset>
		</li>
		<li class="" id="personal_position">
			<fieldset>
				<legend><?php echo lang('escort_be_escort_picture_private_image_label')?></legend>
				<div id="private_medias">
					<?php $media_array= $ci->media_entity->getMediaByPermission($escort->getId(), 'private');?>
					<?php foreach($media_array as $item):?>
					<?php $MEDIA = $ci->media_entity->init('id',$item->id);?>
						<?php if($MEDIA->getType() == 'image'):?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="image">
								<?php echo thumb($MEDIA->getTargetFile('image'),THUMB_W,THUMB_H);?>
								<div class="media-edit image-edit" id="<?php echo $item->id?>"><?php echo language_translate('pictures_videos_media_edit');?></div>
								<div class="media-edit image-delete" id="<?php echo $item->id?>"><?php echo lang('escort_be_photo_delete');?></div>
							</div>
						<?php else:?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="video">
								<?php echo thumb($MEDIA->getTargetFile('avatar'),THUMB_VW,THUMB_VH);?>
								<div class="media-edit"><?php echo language_translate('pictures_videos_media_edit');?></div>
							</div>
						<?php endif;?>
					<?php endforeach;?>
				 </div>
			</fieldset>
		</li>
		<li>
			<?php echo form_checkbox('image_face_censor', 1, $escort->getImageFaceCensor(), 'id="image_face_censor"')?>
			<?php echo lang('escort_be_escort_pictures_videos_image_face_censor');?>
		</li>
	</ul>
	<?php echo form_button(array('id'=>'button_save_action','name'=>'add', 'class'=>'btn blue', 'value'=>lang('escort_be_escort_picture_save_label'), 'content'=>lang('escort_be_escort_picture_save_label')))?>
	<?php echo form_button(array('id'=>'button_add_new_image','name'=>'add', 'class'=>'btn blue', 'value'=>lang('escort_be_escort_picture_add_picture_label'), 'content'=>lang('escort_be_escort_picture_add_picture_label')))?>
</fieldset>
<?php echo form_close()?>
<div id='confirm'>
	<div class='header'><span><?php echo lang('escort_confirm')?></span></div>
	<div class='message'><?php echo lang('escort_be_photo_delete_message')?></div>
		<div class='buttons'>
		<div class='no simplemodal-close'><?php echo lang('escort_be_photo_confirm_no')?></div><div class='yes'><?php echo lang('escort_be_photo_confirm_yes')?></div>
	</div>
</div>
<script type="text/javascript">
var EDIT = '<?php echo language_translate('pictures_videos_media_edit');?>';
var DELETED = '<?php echo language_translate('pictures_videos_media_deleted');?>';

 function createImageUploader(){            
	var uploader = new qq.FileUploader({
		element: document.getElementById('image-file-uploader'),
		action: BASE_URI+'escorts/submit_data/submit_image_file',
		debug: true,
		onComplete: function(id, fileName, responseJSON){
			$.post(BASE_URI+'escorts/async/loadAsyncVideosImages',{},function(res){
				$('#async_div_loading').html(res);
				processSortableDND();
			});
		},
	});           
}
$(document).ready(function() {
	/*
	$('#button_add_new_image').live('click',function(){
		$('#greyDiv').removeClass('hidden');
		$.post(BASE_URI+'escorts/async/load_image_upload_form',{pos:'image'},function(res){
			
			$('#hiddenElement').html(res);
			$('#hiddenElement').dialog(
				{
					 width: 550,
					 height:350 ,
					 draggable: false,
					 beforeClose: function(event, ui) { 
						$('#greyDiv').addClass('hidden');
					 },
					 close: function(event, ui) { reload(); },
					 title: 'Media management' 
				}
			);
			$('.ui-dialog').center();
			createImageUploader();
		 
		});
	});
	*/
	$('#button_add_new_image').live('click',function(){
		if($('div#content-body div.alert').length){
			$('div#content-body div.alert').remove();
		}
		escort_id = $('input[name="current_escort_id"]').val();
		$.colorbox({
			href: SITE_URL + 'admin/be_escort/picture/add/'+ escort_id,
			open: true,
			onComplete: function(){
				$('#cancel-photo').click(function(){
					$.colorbox.close();
				});
				$('#edit-image-form').ajaxForm({
					dataType: 'json',
					success: function(data) {
						if($('div.escale-be-photo-popup section.item div.alert').length){
							$('div.escale-be-photo-popup section.item div.alert').remove();
						}
						if(data.result){
							$.colorbox.close();
							$('div#content-body').prepend('<div class="alert success">'+data.message+'</div>');
							$('#escort-profile').tabs( "load" , 6);
						}else{
							$('div.escale-be-photo-popup section.item').prepend('<div class="alert error">'+data.message+'</div>');
						}
					}
				});
			}
		});
		return false;
	});
	/*
	$('.media-item').live('click',function(){
		$id = $(this).attr('id');
		$('#greyDiv').removeClass('hidden');
		$.post(BASE_URI+'escorts/async/media_manage_async',{id:$id},function(res){
			$('#hiddenElement').html(res);
			$('#hiddenElement').dialog(
				{
					 width: 650,
					 height:550 ,
					 draggable: false,
					 beforeClose: function(event, ui) { 
						$('#greyDiv').addClass('hidden');
					 },
					 title: 'Media management' 
				}
			);
			$('.ui-dialog').center();
		});
	});
*/
	$(".image-edit").live('click', function(){
		if($('div#content-body div.alert').length){
			$('div#content-body div.alert').remove();
		}
		$.colorbox({
			href: SITE_URL + 'admin/be_escort/picture/edit/' + $(this).attr('id'),
			open: true,
			onComplete: function(){
				$('#cancel-photo').click(function(){
					$.colorbox.close();
				});
				$('#edit-image-form').ajaxForm({
					dataType: 'json',
					success: function(data) {
						if(data.result){
							//alert(data.message);
							$.colorbox.close();
							$('div#content-body').prepend('<div class="alert success">'+data.message+'</div>');
							//if(data.file){
								//window.location.href = refresh_url;
							//}
							$('#escort-profile').tabs( "load" , 6);
						}else{
							$('div#content-body').prepend('<div class="alert error">'+data.message+'</div>');
						}
					}
				});
			}
		});
		return false;
	});
	$('.image-delete').live('click',function(e){
		id = $(this).attr('id');
		confirmM('', function () {
			$.post("./admin/be_escort/picture/delete", { "id": id },
				function(data){
					if($('div#content-body div.alert').length){
						$('div#content-body div.alert').remove();
					}
					if(data.result){
						$('div#content-body').prepend('<div class="alert success">'+data.message+'</div>');
						$('#escort-profile').tabs( "load" , 6);
					}else{
						$('div#escale-be-photo-popup section.item').prepend('<div class="alert error">'+data.message+'</div>');
					}
				}, "json");
			return false;
		});
		return false;
	});
	$('#image_face_censor').bind('click',function(){
		if(jQuery('#content-body div.alert').length){
			jQuery('#content-body div.alert').remove();
		}
		if ($(this).is(':checked')) {
			$tmp = 1;
		}else{
			$tmp = 0;
		}
		escort_id = $('input[name="current_escort_id"]').val();
		$(this).attr('value',$tmp);
		$.post(BASE_URI+'admin/be_escort/picture/image_face_censor',{escort_id: escort_id,value:$tmp}, function(data){
			if(data.result){
				jQuery('#content-body').prepend('<div class="alert success">'+ data.message+'</div>');
			}else{
				jQuery('#content-body').prepend('<div class="alert error">'+ data.message+'</div>');
			}
			}, 'json');
	});
});

function processSortableDND(){
	$( "#public_top_media" ).sortable();
	$( "#public_top_media" ).disableSelection();
	$( "#public_top_media" ).bind( "sortupdate", function(event, ui) {
		findFirstPublicMedia();
	});
	
	$( "#public_medias" ).sortable();
	$( "#public_medias" ).disableSelection();
	$( "#public_medias" ).bind( "sortupdate", function(event, ui) {
		findFirstPublicMedia();
	});
	
	$( "#private_medias" ).sortable();
	$( "#private_medias" ).disableSelection();
	$( "#private_medias" ).bind( "sortupdate", function(event, ui) {
		findFirstPublicMedia();
	});
	
	$( "#private_medias" ).bind( "sortstart", function(event, ui) {
		var id = ui.item[0].attributes.id.nodeValue ;
		var image = $('#private_medias #'+id).find('img').attr('src'); 
		sessionStorage.setItem('IMG_TEMP',image);  
	    sessionStorage.setItem('ID_TEMP',id); 
		sessionStorage.setItem('FROM_TEMP','#private_medias'); 
	});
	
	$( "#public_medias" ).bind( "sortstart", function(event, ui) {
		var id = ui.item[0].attributes.id.nodeValue ;
		var image = $('#public_medias #'+id).find('img').attr('src'); 
		sessionStorage.setItem('IMG_TEMP',image);  
	    sessionStorage.setItem('ID_TEMP',id); 
		sessionStorage.setItem('FROM_TEMP','#public_medias'); 
		
	});
	
	$( "#public_top_media" ).bind( "sortstart", function(event, ui) {
		var id = ui.item[0].attributes.id.nodeValue ;
		var image = $('#public_top_media #'+id).find('img').attr('src'); 
		sessionStorage.setItem('IMG_TEMP',image);  
	    sessionStorage.setItem('ID_TEMP',id); 
		sessionStorage.setItem('FROM_TEMP','#public_top_media'); 
	});
	
	$( "#public_medias" ).droppable({
		drop: function( event, ui ) {
			if(sessionStorage.FROM_TEMP != '#public_medias'){
				$typeFrom = $(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).attr('rel');
				$(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).remove();
				$( "#public_medias" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
			}
			findFirstPublicMedia();
		}
	});
	
	$( "#private_medias" ).droppable({
		drop: function( event, ui ) {  
			if(sessionStorage.FROM_TEMP != '#private_medias'){
				$typeFrom = $(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).attr('rel');
				$(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).remove();
				$( "#private_medias" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
			}
			findFirstPublicMedia();
		}
	});
	
	$( "#public_top_media" ).droppable({
		drop: function( event, ui ) { 
			if(sessionStorage.FROM_TEMP != '#public_top_media'){
				$countOldElements = parseInt ( $('#public_top_media .media-item').size() );
				$typeFrom = $(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).attr('rel');
				
				$(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).remove();
				
				if($countOldElements ==1){
					$old_id_element = $('#public_top_media .media-item').attr('id');
					$old_image = $('#public_top_media #'+$old_id_element).find('img').attr('src'); 
					$type = $('#public_top_media #'+$old_id_element).attr('rel');
					
					if($type == 'image'){
						if($typeFrom == 'image'){
							$( "#public_top_media" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="image"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
						}else if($typeFrom == 'video'){
							$( "#public_top_media" ).html('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="video"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
							$( sessionStorage.FROM_TEMP ).append('<div class="media-item ui-state-default" id="'+$old_id_element+'" rel="image"><img src="'+$old_image+'" /><div class="media-edit">'+EDIT+'</div></div>');
						}
					}else if($type == 'video'){
						$( "#public_top_media" ).html('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
						$( sessionStorage.FROM_TEMP ).append('<div class="media-item ui-state-default" id="'+$old_id_element+'" rel="video"><img src="'+$old_image+'" /><div class="media-edit">'+EDIT+'</div></div>');
					}
				}else if($countOldElements > 1){
					//top image type: multi images
					if($typeFrom == 'image'){
						$( "#public_top_media" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="image"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
					}else if($typeFrom == 'video'){
						$oldElementHtml = $( "#public_top_media" ).html();
						$( "#public_top_media" ).html('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
						$( sessionStorage.FROM_TEMP ).append( $oldElementHtml );
					}
				}else if($countOldElements == 0){
					$( "#public_top_media" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
				}
				
			}
			findFirstPublicMedia();
		}
	});
	findFirstPublicMedia();
}

function findFirstPublicMedia(){
	$('#public_medias .media-item').removeClass('red-border');
	$id = $('#public_medias').find('.media-item[rel="image"]').first().attr('id');
	$('#public_medias #'+$id).addClass('red-border');
}
		
$(document).ready(function() { 
	var options2 = { 
		beforeSubmit:  validateB4SubmitAjaxform,  
		success:       processAfterRespondingAjaxform   
	};
	$("#submit_edit_media").live("submit",function(e){
		e.preventDefault(); // <-- important
		$(this).ajaxSubmit(options2);
		return false;
	});	

	processSortableDND();
	$('#button_save_action').click(function(){saveElements();});
});	

function saveElements(){
	if(jQuery('#content-body div.alert').length){
		jQuery('#content-body div.alert').remove();
	}
	$obj = {};
	$pos = ['public_top_media', 'public_medias', 'private_medias'];
	 
	for(var i=0;i<3;i++){
		$element = [];
		$("#"+$pos[i]+" .media-item").each(function(i,o){
			$element.push($(this).attr('id'));
		});
		$ids = $element ? $element.join(',') : '';
		eval("$obj."+$pos[i]+"='"+$ids+"';"); 
	}
	$('#save_loader_image').show();
	$.post(BASE_URI+'admin/be_escort/picture/re_ordering',$obj,function(res){
		$('#save_loader_image').hide();
		if(res.result){
			jQuery('#content-body').prepend('<div class="alert success">'+ res.message+'</div>');
		}else{
			jQuery('#content-body').prepend('<div class="alert error">'+ res.message+'</div>');
		}
	}, 'json');
}

function validateB4Submit(formData, jqForm, options){
	$('.loading_image').show();
	return true;
}

function processAfterResponding(responseText, statusText, xhr, $form) {
	$('.loading_image').hide();	
	if(responseText == 'ok'){
		queryurl(BASE_URI+'escorts/profile/pictures_videos');
		reload();
	}else{
		debug(responseText);
	}
}

function validateB4SubmitAjaxform(formData, jqForm, options){
	$('.loading_update_image').show();
	return true;
}

function processAfterRespondingAjaxform(responseText, statusText, xhr, $form) {
	$('.loading_update_image').hide();	
	if(responseText == 'ok'){
		updatedShow('message-status');
		$.post(BASE_URI+'escorts/async/loadAsyncVideosImages',{},function(res){
			$('#async_div_loading').html(res);
			processSortableDND();
		});
	}else{
		debug(responseText);
	}
}

function deleteItem(id){
	$('.loading_update_image_delete').show();
	$.post(BASE_URI+'escorts/async/delete_media',{id:id},function(res){
		$('#wrap-delete-item').remove();
		updatedShow('message-status');
		$('.message-status').html(DELETED);
		$('#'+id).remove();
	});
}
</script>	